<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            margin:0;
            padding:0;
            background-color: #000;
            font-size: 12px;
        }
        .iphone{
            width:340px;
            height:540px;
            background-color: #fff;
            position: absolute;
            background-color: #fff;
            left:50%;
            top:50%;
            margin:-270px 0 0 -170px;
        }
    </style>
    <script src="../js/lib/jquery-3.3.1.min.js"></script>
    <script src="../js/H5ComponentBase.js"></script>
    <link rel="stylesheet" href="../css/H5ComponentBase.css">
    <!--
    <script src="../js/jquery-ui.min.js"></script>
    <script src="../js/jquery.fullpage.min.js"></script> -->
    <script>
        var cfg = {
            type: 'base',
            text: '文本内容',
            width:514,
            height:306,
            bg:'./p1_people.png',
            css:{
                bottom:0,
                opacity:0,
            },
            animateIn: {bottom:80,opacity:1},
            animateOut: {bottom:0,opacity:0},
            center: true
        }
            $(function () {

                var h5 = new H5ComponentBase('myName',cfg);
                console.log(h5)
                $('.iphone').append(h5)
                var leave=true;
                $('body').click(function(){
                    leave = !leave;
                    console.log(leave);
                    $('.h5_component').trigger(leave?'onLeave':'onLoad')
                })
            })
    </script>
</head>
<body>
    <div class="iphone">

    </div>
   
</body>
</html>